<template>
  <div>

    <el-form :model="queryParams" ref="queryForm" label-width="100px" class="demo-ruleForm">
      <div class="row " style="margin-left: -16px;">
        <el-form-item class="itembox box2" label="快递单号：">
          <el-input clearable v-model="queryParams.tracking_number"></el-input>
        </el-form-item>
        <el-button style="height: 36px;width: 86px;" type="primary" @click="handleQuery">查询</el-button>
        <el-button style="height: 36px;width: 86px;" @click="resetQuery">清空</el-button>
      </div>
    </el-form>

    <el-button v-if="dic_info" type="primary" class="mb_20" @click="gdLook">查看开票信息</el-button>
    <el-button v-else type="primary" class="mb_20" @click="gdAdd">新增开票信息</el-button>

    <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">

      <el-table-column prop="id" label="编号" align="center"></el-table-column>
      <el-table-column prop="title" label="发票抬头" align="center"></el-table-column>
      <el-table-column prop="social_uniform_code" label="社会统一代码" align="center"></el-table-column>
      <el-table-column prop="address" label="开票地址" align="center"></el-table-column>
      <el-table-column prop="phone" label="开票电话" align="center"></el-table-column>
      <el-table-column prop="bank_name" label="开户银行名称" align="center"></el-table-column>
      <el-table-column prop="account" label="开户银行账号" align="center"></el-table-column>
      <el-table-column prop="tracking_number" label="快递单号" align="center"></el-table-column>

      <el-table-column prop="invoice_type" label="类型">
        <template slot-scope="scope">
          <div v-if="scope.row.invoice_type==1">纸质发票</div>
          <div v-if="scope.row.invoice_type==2">电质发票</div>
        </template>
      </el-table-column>

      <el-table-column prop="consignee_information" label="收件信息" align="center"></el-table-column>
      <el-table-column prop="price" label="发票金额" align="center"></el-table-column>
      <el-table-column prop="start_time" label="开票时间" align="center"></el-table-column>
      <el-table-column prop="quantity" label="发票数量" align="center"></el-table-column>


    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.noPage" :limit.sync="queryParams.pageSize" @pagination="getList" />

    </el-tab-pane>
    </el-tabs>




    <el-dialog center :title="title" :visible.sync="open" width="40%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="110px" label-position="left">

        <el-form-item label="发票抬头" prop="title">
          <el-input v-model="form.title" placeholder="请输入" />
        </el-form-item>

        <el-form-item label="社会统一代码" prop="social_uniform_code" align="right">
          <el-input v-model="form.social_uniform_code" placeholder="请输入" />
        </el-form-item>

        <el-form-item label="开票地址" prop="address" align="right">
          <el-input v-model="form.address" placeholder="请输入" />
        </el-form-item>

        <el-form-item label="开票电话" prop="phone" align="right">
          <el-input v-model="form.phone" placeholder="请输入" />
        </el-form-item>

        <el-form-item label="开户行名称" prop="bank_name" align="right">
          <el-input v-model="form.bank_name" placeholder="请输入" />
        </el-form-item>

        <el-form-item label="开户行账号" prop="account" align="right">
          <el-input v-model="form.account" placeholder="请输入" />
        </el-form-item>

        <el-form-item label="收件人地址" prop="consignee_addr" align="right">
          <el-input v-model="form.consignee_addr" placeholder="请输入" />
        </el-form-item>

        <el-form-item label="收件人" prop="recipients" align="right">
          <el-input v-model="form.recipients" placeholder="请输入" />
        </el-form-item>

        <el-form-item label="收件人电话" prop="recipients_phone" align="right">
          <el-input v-model="form.recipients_phone" placeholder="请输入" />
        </el-form-item>


      </el-form>

      <div slot="footer" class="dialog-footer center" v-if="!dic_info">
        <div class="quxiao">
          <el-button style="width: 200px;height: 40px;margin-right: 30px;" @click="cancel">取消</el-button>
        </div>
        <el-button style="width: 200px;height: 40px;" type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>




  </div>
</template>

<script>
  import Cookies from 'js-cookie'
  import Vue from 'vue';

  import * as Work from "@/api/operation/work";
  import * as Contract from "@/api/operation/contract";
  import * as Invoice from "@/api/operation/invoice";


  import * as Auth from '@/utils/auth';
  export default {
    name: 'Index',
    components: {


    },
    data() {
      return {
        // 总条数
        total: 0,
        ulid: '',
        userId: '',
        nickname: '',
        dic_info: null, //发票公司详情
        title: '',
        open: false,
        form: {
          // title:'2223',
          // social_uniform_code:'222'
        },

        // 查询参数
        queryParams: {
          noPage: 1,
          pageSize: 10,
          tracking_number: null,


        },

        tableData: [],
        // 表单校验
        rules: {
          title: [{
            required: true,
            message: "发票抬头不能为空",
            trigger: "blur"
          }],
          social_uniform_code: [{
            required: true,
            message: '"社会统一代码不能为空',
            trigger: 'change'
          }],
          address: [{
            required: true,
            message: '开票地址不能为空',
            trigger: 'change'
          }],
          phone: [{
            required: true,
            message: '开票电话不能为空',
            trigger: 'change'
          }, {
            pattern: /^1[3456789]\d{9}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur'
          }],
          bank_name: [{
            required: true,
            message: '开户银行名称不能为空',
            trigger: 'change'
          }],

          account: [{
            required: true,
            message: '开户银行账号不能为空',
            trigger: 'change'
          }],

          consignee_addr: [{
            required: true,
            message: '收件人地址不能为空',
            trigger: 'change'
          }],

          recipients: [{
            required: true,
            message: '收件人不能为空',
            trigger: 'change'
          }],

          recipients_phone: [{
            required: true,
            message: '收件人电话不能为空',
            trigger: 'change'
          }],
        },

      }
    },
    created() {

      // 读取缓存
      this.nickname = localStorage.getItem('username')
      this.userId = localStorage.getItem('user_id')
      this.getList();
      this.getDic(); //发票公司详情

    },

    mounted() {

    },
    methods: {

      /** 重置按钮操作 */
      resetQuery() {
        this.queryParams.tracking_number = null,
          this.handleQuery();
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.noPage = 1;
        this.getList();
      },



      // 表单重置
      reset() {
        this.fileList = [];
        this.phoFiles = [];
        this.form = {};
        this.resetForm("form");
      },

      /** 查询数据库配置列表 */
      getList() {
        //jp 0 出票  1进票
        this.queryParams.ulid = this.userId
        this.queryParams.platform = 'biqi-business-admin'
        this.queryParams.type_pj = 1
        this.queryParams.user_id = this.userId
        this.queryParams.jp = 1
        this.loading = true;
        Invoice.getList(this.queryParams).then(response => {
          this.tableData = response.data.list;
          this.total = response.data.pagination.totalCount;
          this.loading = false;
        });
      },

      //发票公司详情
      getDic() {
        var per = {};
        per.platform = 'biqi-developer-platform'
        per.type_pj = 1
        per.user_id = this.userId
        this.loading = true;
        Invoice.detailInvoicingCompany(per).then(response => {
          if (response.data.info) {
            this.form = response.data.info;
            this.dic_info = response.data.info;
          }
          this.loading = false;
        });
      },

      // 取消按钮
      cancel() {
        this.open = false;

      },


      //添加发票信息 按钮
      gdAdd() {
        this.title = '添加发票信息';
        this.form = {};
        this.ulid = '';
        this.open = true;
        this.reset()
      },

      //查看发票信息 按钮
      gdLook() {
        this.title = '查看发票信息';
        this.open = true;

      },

      /** 提交按钮 */
      submitForm: function() {
        this.$refs['form'].validate(valid => {
          if (valid) {
            this.form.user_id = this.userId
            this.form.platform = 'biqi-developer-platform'
            this.form.type_pj = 1
            this.loading = true;
            if (this.form.id) {
              Invoice.updateInvoicingCompany(this.form).then(response => {
                this.$modal.msgSuccess('修改成功');
                this.open = false;
                this.loading = false;
                this.getList();
              });
            } else {
              Invoice.addInvoicingCompany(this.form).then(response => {
                this.$modal.msgSuccess('新增成功');
                this.open = false;
                this.loading = false;
                this.getDic()
                this.getList();
              });
            }
          }
        });
      },
      querySearchAsync(queryString, cb) {

        if (queryString) {
          var per = {}
          per.type = '1'
          per.title = queryString
          per.type_pj = 1

          this.loading = true;
          Invoice.getInvoicingCompanyList(per).then(response => {
            this.suggestions = response.data.list;
            cb(this.suggestions);
            this.loading = false;
          });
        }
      },
      tableRowClassName({
        row,
        rowIndex
      }) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },

    }
  }
</script>

<style lang="scss" scoped>
  .pagss {
    height: 100%;
    background: #E4EEF9;
    // padding: 5px 0 15px 40px;
  }

  .panel-group1 {
    padding: 25px;
    margin-top: 18px;
    margin-bottom: 0px;
    margin-right: 15px;
    margin-left: 15px;
    min-height: 760px;
    background: #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
  }

  .ddfbzy {
    width: 112px;
    height: 32px;
    background: #FFDBDB;
    border-radius: 4px;
  }

  .zzcl {
    width: 112px;
    height: 32px;
    background: #DBE2FF;
    border-radius: 4px;
  }

  .yhfk {
    width: 112px;
    height: 32px;
    color: #FFFFFF;
    background: #306EF2;
    border-radius: 4px;
  }

  .ywj {
    width: 112px;
    height: 32px;
    background: #E3E3E3;
    border-radius: 4px;
  }

  .itembox {
    margin-right: 45px;

  }

  ::v-deep .el-rate__icon {
    font-size: 38px;
  }
</style>
